@use 'sass:map';
@use '@angular/material' as mat;

@mixin color($config-or-theme) {
  $config: mat.get-color-config($config-or-theme);
  $foreground: map.get($config, foreground);
  $background: map.get($config, background);
  $primary: map.get($config, primary);

  .pac-formly-array {
    .ngm-formly__array-row {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      border-bottom: 1px dashed transparent;
      position: relative;

      &:hover {
        border-bottom-color: mat.get-color-from-palette($foreground, divider);
        > .ngm-formly__remove {
          visibility: visible;
          opacity: 1;
          right: -40px;
        }
      }

      > .ngm-formly__remove {
        position: absolute;
        right: 0;
        top: 0;
        visibility: hidden;
        opacity: 0;
        transition: all 300ms;
      }
    }

    .ngm-formly-cdk__drag-list.empty {
      border: 1px dashed mat.get-color-from-palette($foreground, divider);;
      border-radius: 3px;
    }
  }

  /* ngm-formly-accordion__drag */
  .ngm-formly-cdk__drag-list {
    &.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder) {
      transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
    }
  }
  .ngm-formly-cdk__drag-placeholder {
    background: mat.get-color-from-palette($background, hover);
    border: dotted 3px mat.get-color-from-palette($primary, 500);
  }
}
